<style type="text/less" lang="less" scoped>
@import url("./index.less");
</style>

<template>
  <el-container>
    <el-main class="content-main">
      <div class="ps-panel" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">列表</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="add"
              >添加源表</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="labelForm.visible = true"
              >标签设置</el-button
            >
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="tableData"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="source_name" label="源表"></el-table-column>
            <el-table-column
              prop="target_label_name"
              label="目标标签"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" size="small" @click="del(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="jump"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <el-dialog
      :title="form.title + '转换'"
      :visible.sync="form.visible"
      width="450px"
      class="edit"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="form.rules"
        status-icon
        size="small"
        label-width="100px"
      >
        <fieldset>
          <legend>基本信息</legend>
          <el-form-item label="源表：" prop="source_name">
            <el-input v-model="form.source_name"></el-input>
          </el-form-item>
          <el-form-item label="数据源：" prop="source_id">
            <el-select
              v-model="form.source_id"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item of sources"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目标标签：" prop="target_label_name">
            <el-treeselect
              style="width: 100%"
              v-model="form.target_label_name"
              placeholder="请输入搜索内容"
              :data="labels"
              :props="{
                label: 'label_name',
                value: 'id',
                children: 'children',
              }"
              :clickParent="true"
              :search="false"
              @nodeClick="labelHandler"
            >
            </el-treeselect>
          </el-form-item>
          <el-form-item label="查询语句：" prop="sql">
            <el-input v-model="form.sql" :rows="2">
              <el-button
                slot="append"
                icon="el-icon-view"
                @click="getFiled"
              ></el-button>
            </el-input>
          </el-form-item>
        </fieldset>
        <fieldset>
          <legend>字段信息</legend>
          <el-table
            :data="form.fields"
            height="250"
            highlight-current-row
            stripe
            size="mini"
          >
            <el-table-column
              prop="source_field"
              label="源字段"
              width="180"
            ></el-table-column>
            <el-table-column label="目标属性">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'fields.' + scope.$index + '.target_attr'"
                  :rules="
                    scope.row.is_conv
                      ? { required: true, message: '不能为空', trigger: 'blur' }
                      : {}
                  "
                  style="margin: 0"
                >
                  <el-select
                    v-model="scope.row.target_attr"
                    placeholder="请选择目标属性"
                  >
                    <el-option
                      v-for="item in modelProperties"
                      :key="item.id"
                      :label="item.display_name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <!-- <el-input size="mini" v-model="scope.row.target_attr"></el-input> -->
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="转换" width="50">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.is_conv"
                  size="mini"
                  :true-label="1"
                  :false-label="0"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </fieldset>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="form.visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="标签设置"
      :visible.sync="labelForm.visible"
      width="450px"
      class="edit"
    >
      <el-tree
        :data="labels"
        node-key="id"
        :expand-on-click-node="false"
        :props="{ label: 'label_name' }"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => addLabel(data)"
              >添加</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="() => editLabel(node, data)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="() => delLabel(node, data)"
              >删除</el-button
            >
          </span>
        </span>
      </el-tree>
    </el-dialog>

    <el-dialog
      title="标签"
      :visible.sync="labelForm.visible2"
      append-to-body
      width="350px"
    >
      <el-form
        ref="labelForm"
        size="small"
        label-width="100px"
        :model="labelForm"
        :rules="labelForm.rules"
      >
        <el-form-item label="标签名：" prop="label_name">
          <el-input type="text" v-model="labelForm.label_name"></el-input>
        </el-form-item>
        <el-form-item label="父标签：">
          <el-treeselect
            v-model="labelForm.parent_name"
            placeholder="请输入搜索内容"
            :data="labels"
            :props="{ label: 'label_name', value: 'id', children: 'children' }"
            :clickParent="true"
            :search="false"
            @nodeClick="handleTreeClick"
            @clearFun="clearTreeClick"
          >
          </el-treeselect>
        </el-form-item>
        <el-form-item label="类型：">
          <el-select
            v-model="labelForm.type"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option label="类型" :value="1"></el-option>
            <el-option label="实体" :value="2"></el-option>
            <el-option label="国家" :value="3"></el-option>
            <el-option label="地区" :value="4"></el-option>
            <el-option label="未知" :value="5"></el-option>
            <el-option label="关键词" :value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标：">
          <el-radio-group v-model="labelForm.target">
            <el-radio-button :label="0">静目标</el-radio-button>
            <el-radio-button :label="1">动目标</el-radio-button>
            <el-radio-button :label="2">非目标</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="态势显示：">
          <el-radio-group v-model="labelForm.is_show">
            <el-radio-button :label="0">不显示</el-radio-button>
            <el-radio-button :label="1">显示</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button @click="labelForm.visible2 = false">取 消</el-button>
          <el-button type="primary" @click="saveLabel">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import elTreeselect from "el-tree-select";

export default {
  name: "index",
  components: {
    elTreeselect
  },
  data: function () {
    const validatePass = (rule, value, callback) => {
      const patt = new RegExp(
        "^[a-z\u4E00-\u9FA5]{1}[a-z0-9\u4E00-\u9FA5]*",
        "ig"
      );
      if (patt.test(value)) {
        callback();
      } else {
        callback(new Error("格式不正确"));
      }
    };
    var validateTargetLabel = (rule, value, callback) => {
      console.log(value);
      if (value) {
        callback();
      } else {
        callback(new Error("不能为空"));
      }

    };
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      tableData: [],
      labels: [],
      form: {
        visible: false,
        rules: {
          source_name: [{
            required: true,
            message: "不能为空",
            trigger: 'blur'
          }],
          source_id: [{
            required: true,
            message: "不能为空",
            trigger: 'blur'
          }],
          target_label_name: [{
            validator: validateTargetLabel,
            trigger: "change"
          },],
          sql: [{
            required: true,
            message: "不能为空",
            trigger: 'blur'
          }],
        },
        id: 0,
        source_name: "",
        source_id: null,
        target_label_id: 0,
        target_label_name: "",
        sql: "",
        fields: [],
        title: "添加"
      },
      dialogVisible: false,
      delVisible: false,
      labelForm: {
        visible: false,
        visible2: false,
        rules: {
          label_name: [{
            required: true,
            message: "不能为空"
          },
          {
            validator: validatePass,
            required: true,
            trigger: "blur"
          },
          ],
        },
        id: 0,
        label_name: "",
        parent_id: "",
        parent_name: "",
        is_show: 0,
        type: 1,
        target: 0,
      },
      sources: [],

      modelProperties: [], //属性列表
      attrPageSet: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }, //目标属性列表分页
    };
  },
  methods: {
    jump (i) {
      if (i === undefined) {
        i = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = i;
      }
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/converter/getTableName",
        method: "get",
        data: {
          page: i,
          number: this.paginations.pageSize
        },
        succeed: (res) => {
          this.tableData = res.rows;
          this.paginations.total = res.total;
        },
      });
    },
    //添加
    add () {
      this.form.visible = true;
      setTimeout(() => {
        this.$refs['form'].resetFields();
        this.form.target_label_name = "";
        this.form.id = 0;
        this.form.source_name = "";
        this.form.source_id = null;
        this.form.target_label_id = 0;
        this.form.sql = "";
        this.form.title = "添加";
        this.form.fields = [];
      })
    },
    edit (row) {
      // console.log(row);
      this.form.title = "编辑";
      this.form.visible = true;
      this.$refs['form'].resetFields();
      setTimeout(() => {
        this.form.id = row.id;
        this.form.source_name = row.source_name;
        this.form.source_id = row.source_id;
        this.form.target_label_id = row.target_label_id;
        this.form.target_label_name = row.target_label_name;
        this.form.sql = row.sql;
        this.form.fields = row.fields === "" ? [] : JSON.parse(row.fields);
        this.getModeProperties(1)
      })
    },
    del (row) {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/converter/deleteDicLabelAttr",
        method: "put",
        data: {
          id: row.id
        },
        succeed: () => {
          this.jump();
          this.$message.success("保存成功");
        },
      });
    },
    save () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            id: this.form.id,
            source_name: this.form.source_name,
            source_id: this.form.source_id,
            target_label_id: this.form.target_label_id,
            target_label_name: this.form.target_label_name,
            sql: this.form.sql,
            the_sql: this.form.sql,
            fields: JSON.stringify(this.form.fields),
          };

          if (this.form.id === 0) {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/converter/saveDicLabelAttr",
              method: "post",
              data: data,
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.form.visible = false;
              },
            });
          } else {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/converter/updateDicLabelAttr",
              method: "put",
              data: data,
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.form.visible = false;
              },
            });
          }
        }
      });
    },
    addLabel (data) {
      this.labelForm.id = 0;
      this.labelForm.label_name = "";
      this.labelForm.parent_id = data.id;
      this.labelForm.parent_name = data.label_name;
      this.labelForm.is_show = 0;
      this.labelForm.type = 1;
      this.labelForm.target = 0;
      this.labelForm.visible2 = true;
    },
    editLabel (node, data) {
      this.labelForm.id = data.id;
      this.labelForm.label_name = data.label_name;
      this.labelForm.parent_id =
        node.parent.parent === null ? 0 : node.parent.data.id;
      this.labelForm.parent_name =
        node.parent.parent === null ? "" : node.parent.data.label_name;
      this.labelForm.is_show = data.is_show;
      this.labelForm.type = data.type;
      this.labelForm.target = data.target;
      this.labelForm.visible2 = true;
    },
    delLabel (node, data) {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/converter/deleteSystemList",
        method: "put",
        data: {
          id: data.id,
          labelName: data.label_name
        },
        succeed: () => {
          this.getLabels();
          this.$message.success("删除成功");
          this.labelForm.visible2 = false;
        },
      });
    },
    //标签树点击
    labelHandler (node) {
      console.log(node);
      this.$set(this.form, "target_label_id", node.id);
      this.$set(this.form, "target_label_name", node.label_name);
      console.log(this.form);
      this.getModeProperties(1);
    },
    saveLabel () {
      this.$refs.labelForm.validate((valid) => {
        if (valid) {
          let data = {
            id: this.labelForm.id,
            label_name: this.labelForm.label_name,
            parent_id: this.labelForm.parent_id,
            is_show: this.labelForm.is_show,
            type: this.labelForm.type,
            target: this.labelForm.target,
          };

          if (this.labelForm.id === 0) {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/converter/saveSystemList",
              method: "post",
              data: data,
              succeed: () => {
                this.getLabels();
                this.$message.success("添加成功");
                this.labelForm.visible2 = false;
              },
            });
          } else {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/converter/updateSystemList",
              method: "put",
              data: data,
              succeed: () => {
                this.getLabels();
                this.$message.success("编辑成功");
                this.labelForm.visible2 = false;
              },
            });
          }
        } else {
          return false;
        }
      });
    },
    handleTreeClick (data) {
      this.labelForm.parent_id = data.id;
    },
    clearTreeClick () {
      this.labelForm.parent_id = 0;
    },
    getLabels () {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/converter/getLabelColumn",
        method: "get",
        succeed: (res) => {
          this.labels = res.rows;
        },
      });
    },
    getFiled () {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        // url: "/api/converter/getFieldName",
        url: "/zonghe/api/comparison/getFieldName",
        method: "get",
        data: {
          source_id: this.form.source_id,
          sql: this.form.sql
        },
        succeed: (res) => {
          console.log(res);
          this.form.fields = [];
          for (const row of res.rows) {
            this.form.fields.push({
              source_field: row,
              target_attr: "",
              is_conv: 0,
            });
          }
          console.log(this.form.fields);
        },
      });
    },
    //根据选中的模型 查询其属性列表
    getModeProperties (pageIndex) {
      // console.log("22222222222222222222", pageIndex, this.currModelId);
      if (pageIndex === undefined) {
        pageIndex = this.attrPageSet.pageIndex;
      } else {
        this.attrPageSet.pageIndex = pageIndex;
      }

      this.$store.dispatch("ajaxSimply", {
        url: "/services/app-zonghe/api/dicLabelProperties?label_id.equals=" +
          this.form.target_label_id,
        method: "get",
        data: {
          page: pageIndex - 1,
          size: this.attrPageSet.pageSize
        },
        succeed: (res) => {
          console.log(res);
          this.modelProperties = res.data;
          this.attrPageSet.total = parseInt(res.headers["x-total-count"]);
        },
      });
    },
  },
  mounted: function () {
    this.jump(1);
    this.getLabels();
    this.$store.dispatch("ajaxSetting", {
      // this.$store.dispatch("ajax", {
      url: "/api/dataSource/queryDataSourceList",
      method: "get",
      data: {
        page: 1,
        number: 999
      },
      succeed: (res) => {
        console.log(res);
        this.sources = res.rows;
      },
    });
  },
};
</script>